// 单个商品的数据
class UIGoods {
  constructor(g) {
    this.data = g
    this.choose = 0
  }
  // 获取总价
  getTotalPrice() {
    return this.data.price * this.choose
  }
  // 是否选择了该商品
  isChoose() {
    return this.choose > 0
  }
  // 商品数目增加
  increase() {
    this.choose++
  }
  // 商品数目减少
  decrease() {
    if (this.choose === 0) {
      return
    }
    this.choose--
  }
}

// 页面上的数据(这里运用了面向对象的思想)
class UIData {
  constructor(g) {
    this.uiGoods = g.map((item) => {
      return new UIGoods(item)
    })
    this.deliveryThreshold = 30 // 起送价
    this.deliveryPrice = 10 // 配送费
  }
  // 获取商品总价
  getTotalPrice() {
    return this.uiGoods.reduce((pre, curr) => (pre += curr.getTotalPrice()), 0)
  }
  // 指定商品数目的增加
  increase(i) {
    this.uiGoods[i].increase()
  }
  // 指定商品数目的减少
  decrease(i) {
    this.uiGoods[i].decrease()
  }
  // 获取所有商品的总数目
  getTotalChooseNumber() {
    return this.uiGoods.reduce((pre, curr) => (pre += curr.choose), 0)
  }
  // 判断购物车内有没有商品
  hasGoodsInCar() {
    return this.getTotalChooseNumber() > 0
  }
  // 是否达到了配送门槛
  isCrossDeliveryThreshold() {
    // console.log(this.getTotalPrice(), 89898)
    return this.getTotalPrice() >= this.deliveryThreshold
  }
  isChoose(index) {
    return this.uiGoods[index].isChoose()
  }
}

class UI {
  constructor(g) {
    this.uidata = new UIData(g)
    this.doms = {
      goodsContainer: document.querySelector('.goods-list'),
      deliveryPrice: document.querySelector('.footer-car-tip'),
      footerPay: document.querySelector('.footer-pay'),
      footerPayInnerSpan: document.querySelector('.footer-pay span'),
      totalPrice: document.querySelector('.footer-car-total'),
      car: document.querySelector('.footer-car'),
      badge: document.querySelector('.footer-car-badge')
    }
    this.createHTML()
    this.updateFooter()
    this.listenEvent()
  }
  listenEvent() {
    this.doms.car.addEventListener('animationend', function () {
      this.classList.remove('animate')
    })
  }
  createHTML() {
    let html = this.uidata.uiGoods
      .map((item, index) => {
        return ` <div class="goods-item">
        <img src="./assets/g1.png" alt="" class="goods-pic" />
        <div class="goods-info">
          <h2 class="goods-title">${item.data.title}</h2>
          <p class="goods-desc">
          ${item.data.desc}
          </p>
          <p class="goods-sell">
            <span>月售 ${item.data.sellNumber}</span>
            <span>好评率${item.data.favorRate}%</span>
          </p>
          <div class="goods-confirm">
            <p class="goods-price">
              <span class="goods-price-unit">￥</span>
              <span>${item.data.price}</span>
            </p>
            <div class="goods-btns">
              <i class="iconfont i-jianhao" data-index=${index}></i>
              <span>0</span>
              <i class="iconfont i-jiajianzujianjiahao" data-index=${index}></i>
            </div>
          </div>
        </div>
      </div>`
      })
      .join()
    this.doms.goodsContainer.innerHTML = html
  }

  // 指定商品数目的增加
  increase(i) {
    this.uidata.increase(i)
    this.updateGoodsItem(i)
    this.updateFooter()
    this.carAnimate()
  }
  // 指定商品数目的减少
  decrease(i) {
    this.uidata.decrease(i)
    this.updateGoodsItem(i)
    this.updateFooter()
    this.carAnimate()
  }
  // 更新某个商品的 ui 显示
  updateGoodsItem(index) {
    let goodsItemDom = this.doms.goodsContainer.children[index]
    if (this.uidata.isChoose(index)) {
      goodsItemDom.classList.add('active')
    } else {
      goodsItemDom.classList.remove('active')
    }
    let span = goodsItemDom.querySelector('.goods-btns span')
    span.textContent = this.uidata.uiGoods[index].choose
  }
  // 更新页脚
  updateFooter() {
    let totalPrice = this.uidata.getTotalPrice()
    this.doms.deliveryPrice.textContent = `配送费￥${this.uidata.deliveryPrice}`
    if (this.uidata.isCrossDeliveryThreshold()) {
      this.doms.footerPay.classList.add('active')
    } else {
      this.doms.footerPay.classList.remove('active')
      let dis = this.uidata.deliveryThreshold - totalPrice
      dis = Math.round(dis)
      this.doms.footerPayInnerSpan.textContent = `还差￥${dis}起送`
    }
    this.doms.totalPrice.textContent = totalPrice.toFixed(2) //总价
    if (totalPrice) {
      this.doms.car.classList.add('active')
      this.doms.badge.innerText = this.uidata.getTotalChooseNumber()
    }
  }

  // 购物车图标动画
  carAnimate() {
    this.doms.car.classList.add('animate')
  }
}
const ui = new UI(goods)
// 监听点击加号/减号事件
ui.doms.goodsContainer.addEventListener('click', function (e) {
  if (e.target.classList.contains('i-jiajianzujianjiahao')) {
    let index = e.target.dataset.index
    ui.increase(index)
  } else if (e.target.classList.contains('i-jianhao')) {
    let index = e.target.dataset.index
    ui.decrease(index)
  }
})
